<template>
  <div>
    <el-table :data="list" style="width: 100%" :height="height">
      <el-table-column prop="time" label="直播时间" width="300">
        <template slot-scope="scope">
          <div>
            {{ scope.row.start_time }}<br>—<br>{{ scope.row.end_time }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="直播间信息" width="300">
        <template slot-scope="scope">
          <div class="d-flex-c">
            <el-avatar :size="80" :src="scope.row.cover_img" shape="square" />
            <div class="d-flex-colomn">
              <span style="width: 150px">{{ scope.row.name }}</span>
              <span style="width: 150px">房间号：{{ scope.row.roomid }}</span>
              <span style="width: 150px">主播：{{ scope.row.anchor_name }}</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="直播状态" width="150">
        <template slot-scope="scope">
          <div>
            {{ scope.row.live_status === 101 ? '直播中' : scope.row.live_status === 102 ? '未开始' : scope.row.live_status === 103 ? '已结束' : scope.row.live_status === '104' ? '禁播' : scope.row.live_status === 105 ? '暂停中' : scope.row.live_status === 106 ? '异常' : scope.row.live_status === 107 ? '已过期' : '' }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <span class="blue mr-100" @click="liveGoodsClick(scope.row)">直播商品</span>
          <span class="red">删除</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      height: 0
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initHeight()
    })
  },
  methods: {
    liveGoodsClick(row) {
      const _row = encodeURIComponent(JSON.stringify(row))
      this.$router.push({ path: '/live/live-goods', query: { goodsInfo: _row }})
    },
    initHeight() {
      this.height = document.body.clientHeight - 280
      window.onresize = () => {
        this.height = document.body.clientHeight - 280
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/el-table.scss';
.border{
	border: 1px solid #eee;
}
.d-flex-s{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.flex-1{
	flex: 1;
}
.d-flex-c{
	display: flex;
	justify-content: center;
	align-items: center;
}
.d-flex-colomn{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.blue{
	color: #409EFF;
	cursor: pointer;
}
.red{
	color: #F56C6C;
	cursor: pointer;
}
.mr-100{
	margin-right: 100px;
}
</style>
